<template>
  <div>
    <el-button type="primary" :loading="btnloadingflag1">用户数量：{{ userNum }}</el-button>
    <el-button type="primary" :loading="btnloadingflag2">商品数量：{{ proNum }}</el-button>
  </div>
  <div class="forms">
    <el-row>
      <el-col :span="24">
        <div id="form1"></div>
      </el-col>
      <el-col :span="24">
        <div id="form2"></div>
      </el-col>
    </el-row>
  </div>

</template>

<script setup lang='ts'>
import { productNumReq, userNumReq } from '@/api/statistic';
import { ref } from 'vue';



/**
 * 获取按钮内数量模块
 */
const btnloadingflag1 = ref(true)
const btnloadingflag2 = ref(true)
//获取商品数量
const proNum = ref(0)
//获取用户数量
const userNum = ref(0)
let timer1: string | number | NodeJS.Timeout = null;
let timer2: string | number | NodeJS.Timeout = null;
serchNUm()
setInterval(() => {
  btnloadingflag1.value = true
  btnloadingflag2.value = true
  clearTimeout(timer1)
  clearTimeout(timer2)
  serchNUm()
}, 1000 * 60 * 5)
function serchNUm() {
  timer1 = setTimeout(() => {
    productNumReq().then(res => {
      if (res.data.code == 200) {
        btnloadingflag1.value = false
        proNum.value = res.data.data
      }
    })
    timer2 = userNumReq().then(res => {
      if (res.data.code == 200) {
        btnloadingflag2.value = false
        userNum.value = res.data.data
      }
    })
  }, 1000)
}
/**
 * echarts练习，表格部分
 */
import * as echarts from 'echarts';
import { getkDataReq, getsimpleDataReq } from '@/api/data';
//获取k线图数据
const kData = ref([])
getkData()
function getkData() {
  getkDataReq().then(res => {
    console.log(res.data);
    if (res.data.code == 200) {
      kData.value = res.data.data
      //绘制k线图
      const form1 = document.getElementById('form1');
      const myChart1 = echarts.init(form1);
      let option1 = {};
      option1 = {
        xAxis: {
          data: kData.value.x
        },
        yAxis: {},
        series: [
          {
            type: 'candlestick',
            data: kData.value.val
          }
        ]
      };
      myChart1.setOption(option1);
    }
  })
}
//获取折线图数据
const simpleData = ref([])
getsimpleData()
function getsimpleData() {
  getsimpleDataReq().then(res => {
    console.log(res.data);
    if (res.data.code == 200) {
      simpleData.value = res.data.data
      //绘制折线图
      const form2 = document.getElementById('form2');
      const myChart2 = echarts.init(form2);
      let option2 = {};
      option2 = {
        xAxis: {
          type: 'category',
          data: simpleData.value.map(v => v.x)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: simpleData.value.map(v => v.val),
            type: 'line'
          }
        ]
      };
      myChart2.setOption(option2);
    }
  })
}
</script>

<style scoped lang="scss">
.forms {
  height: 85vh;

  #form1,
  #form2 {
    width: 100%;
    height: 600px;
  }
}
</style>
